<template>
  <div>
      <button @click="isShow = !isShow">显示/隐藏</button>
<!--    v-if隐藏的话 是直接删除被隐藏的div-->
    <div v-if="isShow">
        {{msg}}
    </div>
<!--    v-show隐藏的话 实际是给这个div加了一个display：none的css语法
   并没有真正删除-->
    <div v-show="isShow">
      {{msg}}
    </div>
    <br/>
<!--    v-if 和 v-else -->
    <div v-if="isShow">
      <p>1111111111111111111111</p>
      <p>1111111111111111111111</p>
      <p>1111111111111111111111</p>
      <p>1111111111111111111111</p>
      <p>1111111111111111111111</p>
    </div>
    <div v-else>
      <p>2222222222222222</p>
      <p>2222222222222222</p>
      <p>2222222222222222</p>
      <p>2222222222222222</p>
      <p>2222222222222222</p>
    </div>
    <br/>
    <!--    v-if 和 v-else-if v-else -->
    <button @click="tab=1">tab1</button>
    <button @click="tab=2">tab2</button>
    <button @click="tab=3">tab3</button>
    <button @click="tab=100">tab4</button>
    <div v-if="tab  == 1">
      111111111111111111111111111
    </div>
    <div v-else-if="tab  == 2">
      222222222222222222222222222
    </div>
    <div v-else-if="tab  == 3">
      3333333333333333333333
    </div>
    <div v-else>
      elseelseelseelseelseelseelseelseelseelseelseelse
    </div>
  </div>
</template>

<script>

export default {
  name: "App",
  data(){
    return{
        isShow:true,
        msg:'this  is  test',
        tab:1
    }
  },
  methods:{

  }
}
</script>

<style scoped>

</style>